<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">

		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<meta name="description" content="A drawing application that lets you save and share replays of your work with friends." />
		<meta name="author" content="Hakim El Hattab" />

		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="viewport" content="width = 1040" />

		<meta property="fb:admins" content="726190751" />
		<meta property="fb:app_id" content="433337680065765" />

		<meta property="og:image" content="/imgages/icon-200.png" />
		<meta property="og:title" content="An animated sketch" />
		<meta property="og:description" content="Draw sketches and share replays with friends!" />
		<meta property="og:type" content="sketchtoy:sketch" />

		<link rel="apple-touch-icon" sizes="57x57" href="/images/apple-touch-icon-114.png" />
		<link rel="apple-touch-icon" sizes="114x114" href="/images/apple-touch-icon-114.png" />
		<link rel="apple-touch-icon" sizes="72x72" href="/images/apple-touch-icon-144.png" />
		<link rel="apple-touch-icon" sizes="144x144" href="/images/apple-touch-icon-144.png" />

		<title>Sketch Toy: Draw sketches and share replays with friends!</title>

		<link href="/css/sketch.min.css" rel="stylesheet" media="screen" />

		<script>
		var _gaq = _gaq || [];
		_gaq.push(['_setAccount', 'UA-36691274-1']);
		_gaq.push(['_trackPageview']);
		</script>

	</head>

	<body>

		<div class="main-container">

			<div class="toolbar">
				<button class="btn new-button green" title="New sketch" name="new-button">New</button>
				<button class="btn save-button green" title="Save the sketch" name="save-button">Save</button>

				<div class="divider"></div>

				<button class="btn undo-button" title="Undo last action" name="undo-button">Undo</button>
				<button class="btn eraser-toggle" title="Eraser" name="eraser-toggle">Eraser</button>

				<div class="dropdown size-dropdown">
					<button class="btn dropdown-title"><span class="label">Size:</span> <span class="value"></span></button>
					<div class="dropdown-list auto-width">
						<ul>
							<li><button data-value="0.5" class="small"><span style="width: 1px; height: 1px;"></span></button></li>
							<li><button data-value="1" class="small"><span style="width: 2px; height: 2px;"></span></button></li>
							<li><button data-value="2" class="small"><span style="width: 3px; height: 3px;"></span></button></li>
							<li><button data-value="3" class="small"><span style="width: 4px; height: 4px;"></span></button></li>
							<li><button data-value="4"><span style="width: 6px; height: 6px;"></span></button></li>
							<li><button data-value="5"><span style="width: 8px; height: 8px;"></span></button></li>
							<li><button data-value="7"><span style="width: 10px; height: 10px;"></span></button></li>
							<li><button data-value="9"><span style="width: 12px; height: 12px;"></span></button></li>
							<li><button data-value="16"><span style="width: 16px; height: 16px;"></span></button></li>
							<li><button data-value="32" class="large"><span style="width: 28px; height: 28px;"></span></button></li>
							<li><button data-value="64" class="xlarge"><span style="width: 50px; height: 50px;"></span></button></li>
						</ul>
					</div>
				</div>

				<div class="dropdown vibration-dropdown">
					<button class="btn dropdown-title"><span class="label">Vibration:</span> <span class="value"></span></button>
					<div class="dropdown-list auto-width">
						<ul>
							<li><button data-value="0">0</button></li>
							<li><button data-value="1">1</button></li>
							<li><button data-value="2">2</button></li>
							<li><button data-value="3">3</button></li>
							<li><button data-value="5">5</button></li>
							<li><button data-value="10">10</button></li>
							<li><button data-value="20">20</button></li>
						</ul>
					</div>
				</div>

				<div class="dropdown color-dropdown">
					<button class="btn dropdown-title"><span class="label"></span> <span class="value"></span></button>
					<div class="dropdown-list">
						<ul>
							<li><button data-value="#000000" style="background: #000000;">&nbsp;</button></li>
							<li><button data-value="#555555" style="background: #555555;">&nbsp;</button></li>
							<li><button data-value="#999999" style="background: #999999;">&nbsp;</button></li>
							<li><button data-value="#0a67a3" style="background: #0a67a3;">&nbsp;</button></li>
							<li><button data-value="#3e97d1" style="background: #3e97d1;">&nbsp;</button></li>
							<li><button data-value="#8ec9ef" style="background: #8ec9ef;">&nbsp;</button></li>
							<li><button data-value="#ff0000" style="background: #ff0000;">&nbsp;</button></li>
							<li><button data-value="#f56c36" style="background: #f56c36;">&nbsp;</button></li>
							<li><button data-value="#f8a881" style="background: #f8a881;">&nbsp;</button></li>
							<li><button data-value="#407f1a" style="background: #407f1a;">&nbsp;</button></li>
							<li><button data-value="#7ed616" style="background: #7ed616;">&nbsp;</button></li>
							<li><button data-value="#ddec38" style="background: #ddec38;">&nbsp;</button></li>
							<li><button data-value="#a15f9d" style="background: #a15f9d;">&nbsp;</button></li>
							<li><button data-value="#f580e3" style="background: #f580e3;">&nbsp;</button></li>
							<li><button data-value="#ffff00" style="background: #ffff00;">&nbsp;</button></li>
							<li><button data-value="#8a5025" style="background: #8a5025;">&nbsp;</button></li>
							<li><button data-value="#ef934d" style="background: #ef934d;">&nbsp;</button></li>
							<li><button data-value="#ffffff" style="background: #ffffff;">&nbsp;</button></li>
						</ul>
					</div>
				</div>

				<div class="divider"></div>

				<button class="btn facebook-share blue"><span class="icon"></span> <span class="label">Share</span></button>
				<button class="btn facebook-send blue"><span class="icon"></span> <span class="label">Send</span></button>
				<button class="btn tweet-button blue"><span class="icon"></span> <span class="label">Tweet</span></button>
			</div>

			<br>

			<div class="share-overlay">
				<div class="inner">
					<a class="close" href="#"></a>
					<div class="url">
						<p class="label">Link:</p>
						<input type="text" readonly value="" />
					</div>
					<div class="share">
						<a class="share-facebook" href="#"><span class="label">Share</span> <span class="icon"></span></a>
						<a class="share-facebook-message" href="#"><span class="label">Send Message</span> <span class="icon"></span></a>
						<!-- <a class="share-facebook-photo" href="#"><span class="label">Upload Photo</span> <span class="icon"></span></a> -->
						<a class="share-twitter" href="#"><span class="label">Tweet</span> <span class="icon"></span></a>
						<a class="share-email" href="#"><span class="label">Email</span> <span class="icon"></span></a>
						<a class="share-download" href="#"><span class="label">Download Image</span> <span class="icon"></span></a>
					</div>
				</div>
			</div>

			<div class="loading-overlay">
				<div class="inner">
					<div class="status"></div>
					<div class="message"></div>
				</div>
			</div>

			<div id="spinner"></div>

			<div class="sketch-canvas-wrapper">
				<div id="left-pillar">
					<script type="text/javascript">
					google_ad_client = "ca-pub-1254673939137008";
					google_ad_slot = "2711705175";
					google_ad_width = 120;
					google_ad_height = 600;
					</script>
				</div>

				<div class="sketch-canvas-container">
					<canvas class="sketch-canvas">
						<p class="noCanvas">You need a <a href="http://www.google.com/chrome">modern browser</a> to view this.</p>
					</canvas>
					<div class="replay-controls">
						<div class="progress"></div>
					</div>
				</div>

				<div id="right-pillar">
					<script type="text/javascript">
					google_ad_client = "ca-pub-1254673939137008";
					google_ad_slot = "4188438377";
					google_ad_width = 120;
					google_ad_height = 600;
					</script>
				</div>
			</div>

		</div>

		<script>
		var SketchConfig = {
			autodetectLanguage: false
		};
		</script>
		<script src="/js/jquery.min.js"></script>
		<script src="/js/sketch.js"></script>

	</body>
</html>
